<template>
  <div class="gender">
    <div class="gender-title"> 销售走势分析 </div>
    <div
      class="gender-box"
      v-show="!loading"
      element-loading-background="rgba(122, 122, 122, 0.8)"
      v-loading="loading"
    >
      <div class="com-trend" ref="trend_ref"></div>
    </div>
  </div>
</template>

<script setup>
import { salesTrendsApi } from '@/api/statistic'
import usePermissionStore from '@/store/modules/permission'
import * as echarts from 'echarts'
const allData = ref([]) // 服务器返回的数据
const trend_ref = ref(null)
const trendInstance = ref(null)

const initOption = ref({})
// 初始化etrendInstance
function initChart() {
  trendInstance.value = echarts.init(trend_ref.value, 'chalk')
  // 对图标初始化配置的控制
  initOption.value = {
    color: ['#007CFF', '#00F6FF'],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      data: ['本周', '上周'],
      icon: 'circle',
      textStyle: {
        color: 'item',
        fontSize: 15
      },
      itemGap: 90
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        // 标轴轴线相关设置。
        lineStyle: {
          width: 1,
          color: 'rgba(57, 152, 255, 0.18)'
        }
      },
      axisLabel: {
        show: true,
        interval: 0,
        textStyle: {
          //更改坐标轴文字颜色
          fontSize: 11, //更改坐标轴文字大小
          color: '#fff',
          fontWeight: 'bold'
        },
        margin: 14
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          //更改坐标轴文字颜色
          fontSize: 12, //更改坐标轴文字大小
          color: '#B8D3F1'
        },
        margin: 20
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['rgba(57, 152, 255, 0.18)'],
          width: 1,
          type: 'solid'
        }
      }
    },
    series: [
      {
        name: '本周',
        type: 'line',
        data: [],
        lineStyle: {
          color: '#007CFF'
        }
      },
      {
        name: '上周',
        type: 'line',
        data: [],
        lineStyle: {
          color: '#00F6FF'
        }
      }
    ]
  }
  trendInstance.value.setOption(initOption.value)
}
// 更新图表
function updateChart() {
  salesTrendsApi().then((res) => {
    const dictValue = localStorage.getItem('dictValue')
    const list = res?.data?.series.map((item) => {
      return {
        ...item,
        data: item.data.map((i) => {
          return i * Number(dictValue)
        })
      }
    })
    const dataOption = {
      xAxis: {
        data: res?.data?.xaxisData
          ? res?.data?.xaxisData
          : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      series: list || []
    }
    trendInstance.value.setOption(dataOption)
    loading.value = false
  })
}

const timer = ref(null)
onUnmounted(() => {
  clearInterval(timer.value)
})

onDeactivated(() => {
  clearInterval(timer.value)
})

const loading = ref(true)
onActivated(() => {
  const flag = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (!flag) {
    return
  }
  loading.value = true
  updateChart()
  timer.value = setInterval(() => {
    updateChart()
  }, 30000)
})
onMounted(() => {
  const flag = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (!flag) {
    return
  }
  loading.value = true
  initChart()
  updateChart()
  timer.value = setInterval(() => {
    updateChart()
  }, 30000)
})
</script>

<style lang="scss" scoped>
.trend-box {
  width: 610px;
  height: 100%;
}
.com-trend {
  width: 610px;
  height: 300px;
}
.gender {
  margin-top: 35px;
  position: relative;
  width: 610px;
  // width: 30vw;
  .gender-title {
    padding-left: 40px;
    width: 332px;
    height: 38px;
    color: #fff;
    font-family: 'HarmonyOS Sans SC';
    font-size: 20px;
    font-weight: bold;
    line-height: 38px; /* 92.308% */
    background-image: url('../../assets/images/title-l-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 38px;
  }
}
.gender-box {
  width: 610px;
  height: 300px;
}
// .com-trend {
//   width: 25vw;
//   height: 500px;
//   position: relative;
//   padding: 30px 0;
// }
</style>
